<template>
  <div class="vue-dropdown default-theme">
    <div class="list-and-search on">
      <div class="search-module clearfix" v-show="isNeedSearch">
        <input
          class="search-text"
          @keyup="search($event)"
          @focus="search($event)"
          @input="checkVal"
          @blur="checkVal"
          :placeholder="placeholder"
          v-model="value"
          :maxlength="30"
        />
      </div>
      <ul class="list-module" v-show="isShow">
        <li
          v-for="(item, index) in datalist"
          :class="{active:index==crueentIndex}"
          @click="selectToggle(item)"
          :key="index"
        >
          <span class="list-item-text">{{ item.label }}</span>
        </li>
      </ul>
      <!-- <div
        class="tip-nodata"
        v-show="isShow && isNeedSearch && datalist.length == 0"
      >
        {{ nodatatext }}
      </div> -->
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      datalist: [],
      isShow: false,
      value: "",
      crueentIndex:-1
    };
  },
  props: {
    itemlist: Array, //父组件传来的数据
    placeholder: {
      type: String,
      default: "搜索", //input placeholder的默认值
    },
    searchVal: {
      type: String,
      default: "", //input placeholder的默认值
    },
    isNeedSearch: {
      //是否需要搜索框
      type: Boolean,
      default: false,
    },
    nodatatext: {
      type: String,
      default: "未找到结果", //没有搜索到时的文本提示
    },
  },
  mounted(){
    window.addEventListener("keydown", this.KeyDown);
  },
  created() {
    this.datalist = this.itemlist;
    //点击组件以外的地方，收起
    document.addEventListener(
      "click",
      (e) => {
        if (!this.$el.contains(e.target)) {
          this.isShow = false;
        }
      },
      false
    );
  },
  watch: {
     searchVal(){
         this.value=this.searchVal
     },
    value(newdata, olddata) {
      this.$emit("changeVal", this.value);
    },
  },
  methods: {
    KeyDown(e){      
      switch(e.keyCode){
        case 40:
          if(this.crueentIndex<this.datalist.length-1){
            this.crueentIndex++;
          }          
          break;
        case 38: 
          if(this.crueentIndex>0){
            this.crueentIndex--;
          }          
          break;
        case 13: 
          if(this.crueentIndex>-1){
            this.selectToggle(this.datalist[this.crueentIndex])        
            break;
          }
          
      }   
    },
    checkVal(){
      this.crueentIndex=-1
      this.$parent.validate()
    },
    selectToggle(data) {
      this.value = data.label;
      this.isShow = false;
      this.$parent.validate()
      this.$emit("changeVal", data.label);
    },
    search(e) {
      let searchvalue = e.currentTarget.value;   
      if(e.keyCode&&e.keyCode==13) {
        return;
      }  
      if (searchvalue) {
        this.isShow = true;        
        this.datalist = this.itemlist.filter((item, index, arr) => {
          return item.label.indexOf(searchvalue) != -1;
        });
      } else {
        this.isShow = false;
      }
    },
  },
};
</script>

<style lang="less" scoped>
.list-and-search {
  background: #fff;
  display: none;
  &.on {
    display: block;
  }
}
.cur-name {
  height: 32px;
  line-height: 32px;
  text-indent: 10px;
  position: relative;
  color: #777;
  &:after {
    position: absolute;
    right: 9px;
    top: 13px;
    content: " ";
    width: 0;
    height: 0;
    border-right: 6px solid transparent;
    border-top: 6px solid #7b7b7b;
    border-left: 6px solid transparent;
    border-bottom: 6px solid transparent;
  }
  &.show {
    &:after {
      right: 9px;
      top: 6px;
      border-right: 6px solid transparent;
      border-bottom: 6px solid #7b7b7b;
      border-left: 6px solid transparent;
      border-top: 6px solid transparent;
    }
  }
}
.vue-dropdown.default-theme:hover {
  border-color: #57a3f3;
}
.vue-dropdown.default-theme {
  z-index: 10;
  border-radius: 4px;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  &._self-show {
    display: block !important;
  }
  .search-module {
    position: relative;
    .search-text {
      width: 100%;
      height: 32px;
      text-indent: 10px;
      border-radius: 4px;
      // border-radius: 0.5em;
      border: 1px solid #dcdee2;
      box-shadow: none;
      outline: none;
      color: #515a6e;
      // &:focus {
      // border-color: #2198f2;
      // }
    }
    .search-icon {
      position: absolute;
      top: 24%;
      right: 0.5em;
      color: #aaa;
    }
  }
  input::-webkit-input-placeholder {
    font-size: 14px;
    color: #ccc;
  }
  .list-module {
      position: absolute;
      left: 0;
      right: 0;
      top: 40px;
      z-index: 999;
     
    max-height: 200px;
    overflow-y: auto;
    border-radius: 4px;
    background: #fff;
    box-shadow: 0 1px 6px #ddd;
    li {
        padding-left: 10px;
      &._self-hide {
        display: none;
      }
      &:hover {
        cursor: pointer;
        background: #f3f3f3;
      }
      &.active{
        background: #f3f3f3;
      }
    }
  }
}
.tip-nodata {
  font-size: 14px;
  padding: 10px 0;
  text-indent: 10px;
  position: absolute;
  left: 0;
  right:0;
  top: 40px;
  z-index: 999;
  background: #fff;
  box-shadow: 0 1px 6px #ddd;
}
</style>